<html>
<head>
	<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
	<meta name="apple-mobile-web-app-capable" content="yes"/>
	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> 
	

	<script src="plugin/jquery-ui/js/jquery-1.5.1.min.js" type="text/javascript" ></script>
	<script src="plugin/jquery.tmpl/jquery.tmpl.min.js" type="text/javascript" ></script>
	<script src="plugin/iscroll/iscroll-min.js" type="text/javascript" ></script>
	<script src="js/Vector2.js" type="text/javascript" ></script>
	<script src="js/Rectangle.js" type="text/javascript" ></script>
	<script src="js/TouchController.js" type="text/javascript" ></script>
	<script src="js/com.unknown.Constants.js" type="text/javascript" ></script>
	<script src="js/com.unknown.GameWindow.js" type="text/javascript" ></script>
	<script src="js/com.unknown.KeyboardHandler.js" type="text/javascript" ></script>
</head>
<body >
<style>
#player {
	width : 100px;
	height : 100px;
	background-image: url('images/person/player_actions.png');
	background-repeat: no-repeat;
	background-position: -1600 0;
		
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}
.l4{
	z-index: 25;
}
#player-window > div {
	position: absolute;
	
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	
	border-width: 1px;
	border-color: #000;
	border-style: solid;
}
#player-window > div > div {
	width : 100px;
	height: 100px;
	
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}
#scrollable {
	width : 1500px;
	height : 800px;
}
#container {
}
#mask{
	top : 0px;
	left: 0px;
	position: absolute;
	z-index: 1100;
}
.btnleft, .btnright, .btnup, .btndown {
	width: 30px;
	height: 30px;
	position: absolute;
	background-color: black;
	z-index: 990;
}

.btnleft {
	top: 250px;
	left: 20px;
}
.btnright {
	top: 250px;
	left: 80px;
}
.btnup {
	top: 220px;
	left: 50px;
}
.btndown {
	top: 280px;
	left: 50px;
}

</style>
	<div>
		<input type="text" id="path" value="images/tiles/" style="width:300px;"><br/>
		<input type="file" id="f1" value="hex_grass_n.png">
	</div>
	<canvas id="mask">
	</canvas>	
	<div id="container">
		<div id="scrollable">
			<div id="alt-view" style="position:absolute; height:100px;">
			</div>
		</div>
		<div id="objects" style="position:absolute; height:100px; z-index: 50">
		</div>
		</div>
	</div>
	<div id="imagebucket" style="display: none;">
		<img id="p1" src="images/person/player_actions.png">
	</div>
	<script type="text/x-jquery-tmpl" id="hex">
		<img src="{{= src }}" style="position: absolute; top:{{= top }}; left:{{= left }};" >
	</script>
	<script type="text/javascript">
		var _iscroll;
		var SPACING_X = 70;
		var SPACING_Y = 18;
					
		mask.top = 0;
		mask.left = 0;
		mask.height = window.innerHeight;
		mask.width = window.innerWidth;
		
		$('#container').css("height", window.innerHeight + "px");
		$('#container').css("width", window.innerWidth + "px");
		
		_iscroll = new iScroll('container', {
			hScroll      :true
			, vScroll    :true
			, hScrollbar : true
			, vScrollbar : true
			, hideScrollbar : false
			, zoom : false
			, zoomMin : 0.20
		});
		
		var gamewindow = new com.unknown.GameWindow(mask, imagebucket, 'images/person/player_actions.png');
		
		var imageSrc = 'hex_grass_n.png';
		
		var objects = [];
		var tiles = [];
		
		getImage = function(){
			var f1 = imageSrc
			var path = $('#path').val()
			f1 = f1.substring( f1.lastIndexOf('\\') )
			f1 = f1.substring( 0, f1.length - 5)
			var i = Math.floor(Math.random()*6)
			var ext;
			if( i == 0 ){ ext = 'n' }
			if( i == 1 ){ ext = 's' }
			if( i == 2 ){ ext = 'ne' }
			if( i == 3 ){ ext = 'nw' }
			if( i == 4 ){ ext = 'se' }
			if( i == 5 ){ ext = 'sw' }
			
			return path+f1 + ext + '.png'
		};

		var row = 0;
		var col = 0;
		for(row=0;row <40;row++){
			for(col=0; col < 20; col++){
				var tile = {
						top  : row*SPACING_Y,
						left : col*SPACING_X - ((row%2)*(SPACING_X/2)),
						src  : getImage()
					};
				tiles.push(tile);
				//$('#hex').tmpl( tile ).appendTo('#alt-view');
			}
		}
		imageSrc = '../objects/tree_n.png';
		var path = $('#path').val()
		for(col=0; col < 20; col+=2){
			objects.push({
				top : -5 * SPACING_Y,
				left : col * SPACING_X - ((-5%2)*(SPACING_X/2)),
				src : getImage(),
				width : 200,
				height : 200
			});
		}
		
		for(col=0; col < 20; col+=2){
			objects.push({
				top : 0 * SPACING_Y,
				left : col * SPACING_X - ((0%2)*(SPACING_X/2)),
				src : getImage(),
				width : 200,
				height : 200
			});
		}
		
		for(col=0; col < 20; col+=2){
			objects.push({
				top : 16 * SPACING_Y,
				left : col * SPACING_X - ((16%2)*(SPACING_X/2)),
				src : getImage(),
				width : 200,
				height : 200
			});
		}
								
		TouchListener = function(){};
		TouchListener.prototype = {
			listeners : [],
			
			addListener : function(l){
				this.listeners.push( l );
			},
			removeListener : function(l){
				this.listeners.remove( l );
			},
			notifyListeners : function(method, e){
				try{
					for(index in this.listeners){
						var listener = this.listeners[index];
						listener[method](e);
						//var fnct = listener[method](e);
						//if( fnct )
						//	fnct(e);
					}
				}catch(err){
					var vDebug = ""; 
				    for (var prop in err) 
				    {  
				       vDebug += "property: "+ prop+ " value: ["+ err[prop]+ "]\n"; 
				    } 
				    vDebug += "toString(): " + " value: [" + err.toString() + "]"; 
					alert(vDebug);
				}
			}
		};
		
		var tl = new TouchListener();
		if( com.unknown.Constants.TOUCHABLE ){
			mask.addEventListener( 'touchstart', function(e){ tl.notifyListeners("onTouchStart", e); }, false );
			mask.addEventListener( 'touchmove', function(e){ tl.notifyListeners("onTouchMove", e); }, false );
			mask.addEventListener( 'touchend', function(e){ tl.notifyListeners("onTouchEnd", e); }, false );
		}
		var tc = new TouchController(new Rectangle(0,0, 150, 300), gamewindow);
		tl.addListener( tc );
		gamewindow.billboards.push( tc );
		
		var keyboardHandler = new com.unknown.KeyboardHandler(gamewindow);
		
		var background = new com.unknown.Background(gamewindow);
		background.tiles   = tiles;
		background.objects = objects;
		background.load();
		gamewindow.backgrounds.push(background);
		
		window.scrollTo(0,0);
				
		setInterval(function(){ gamewindow.mainLoop() }, 1000/35);
		
	</script>
</body>
</html>